<template>
	<view>
		<u-navbar title="险情上报" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-left"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160">
				<!-- <u-form-item label="险情类型:" prop="reportType"> -->
					<!-- <u-radio-group v-model="form.reportType" @change="radioGroupChange">
						<u-radio :name="1">积水险情</u-radio>
						<u-radio :name="2">工程险情</u-radio>
					</u-radio-group> -->
					<div class='checkBtnList2'>
						<div  class='checkBtn' :class="{checkBtnActive:checkBtnIndex==1}" @click="checkBtnClick(1)">
							积水险情
						</div>
						<div  class='checkBtn' :class="{checkBtnActive:checkBtnIndex==2}" @click="checkBtnClick(2)">
							工程险情
						</div>
					</div>
				<!-- </u-form-item> -->
			  <!--内涝积水-->
				<div v-if="form.reportType == 1">
					<water ref="childRules" :stagnantWaterParams= "stagnantWaterParams" :addressInfo="addressInfo"></water>
				</div>

				<!--工程险情-->
				<div v-if="form.reportType == 2">
					<engineering :engineeringDangerParams="engineeringDangerParams" :addressInfo="addressInfo"></engineering>
				</div>
				
				<u-button type="primary" size="default" :ripple='true' style="margin-top: 50rpx;" @click="save">提交</u-button>
			</u-form>
		</view>
		<u-toast ref="uToast" />
		<!-- 底部导航 -->
		<!-- <u-tabbar :list="tabbarList" height="40px"></u-tabbar> -->
	</view>
</template>

<script>
	  import water from "./water.vue";
	  import engineering from "./engineering.vue";
	export default {
		onShow() {
			uni.$on('address',(info)=>{  //开启监听全局的地址改变事件
				this.addressInfo = info.data
		   })
		},
		onUnload(){
		    uni.$off('address')  //在此生命周期里销毁地址改变事件的监听
		},
		components: { water,engineering},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				showTime:false,
				form: {
					reportType: '1',
				},
				addressInfo:[],
				stagnantWaterParams: {
					stagAffect: 1,
					stagDepth: 1,
					stagArea: 1,
					happenTime: "",
					address:"",
					description:'',
					attachFiles:[],
					imageFiles:[], //图片 file集合
					videoFiles:[],//视频 file集合
				},
				engineeringDangerParams: {
					address:"",
					happenTime:"",
					type:1,
					area:1,
					personNumber:'',
					description:'',
					attachFiles:[],
					imageFiles:[], //图片 file集合
					videoFiles:[],//视频 file集合
				},
				checkBtnIndex:1
			}
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
			checkBtnClick(data) {
				this.checkBtnIndex = data
				if(data==1) {
					this.form.reportType = 1
				} else {
					this.form.reportType = 2
				}
			},
			goBack() {
				uni.navigateBack()
			},
			radioGroupChange(e){
			   this.form.reportType = e;
			},
			save(){
				 let taskDto,formdata = new FormData();
				 
				 if((this.form.reportType ==1 && !this.stagnantWaterParams.address) || (this.form.reportType !=1 && !this.engineeringDangerParams.address)){
					uni.showToast({
						icon:'none',
					    title:'请选择险情地点',
						type: 'warning',
					})
					return
				 }
				 if(this.form.reportType ==1){
					 taskDto = {
					 	type: this.form.reportType,
					 	address: this.stagnantWaterParams.address,
					 	description: this.stagnantWaterParams.description,
					 	lgtd: this.stagnantWaterParams.lgtd,
					 	lttd: this.stagnantWaterParams.lttd,
					 	happenTime: this.stagnantWaterParams.happenTime,
					 	stagAffect: this.stagnantWaterParams.stagAffect,
					 	stagDepth: this.stagnantWaterParams.stagDepth,
						stagArea: this.stagnantWaterParams.stagArea,
						channel: 'app'
					 };
					 this.stagnantWaterParams.attachFiles = this.stagnantWaterParams.imageFiles.concat(this.stagnantWaterParams.videoFiles);
					 for (let i = 0; i < this.stagnantWaterParams.attachFiles.length; i++) {
					 	formdata.append("file", this.stagnantWaterParams.attachFiles[i], this.stagnantWaterParams.attachFiles[i].name);
					 }
				 }else{
					  taskDto = {
						 type: this.form.reportType,
						 address: this.engineeringDangerParams.address,
						 description: this.engineeringDangerParams.description,
						 lgtd: this.engineeringDangerParams.lgtd,
						 lttd: this.engineeringDangerParams.lttd,
						 happenTime: this.engineeringDangerParams.happenTime,
						 affectArea:this.engineeringDangerParams.area,
						 affectPopulation:this.engineeringDangerParams.personNumber,
						 engiType:this.engineeringDangerParams.type,
						 channel:'app',
						 					 };
						this.engineeringDangerParams.attachFiles = this.engineeringDangerParams.imageFiles.concat(this.engineeringDangerParams.videoFiles);
						if(this.engineeringDangerParams.attachFiles!=undefined&& this.engineeringDangerParams.attachFiles.length>0){
							for (let i = 0; i < this.engineeringDangerParams.attachFiles.length; i++) {
								formdata.append("file", this.engineeringDangerParams.attachFiles[i], this.engineeringDangerParams.attachFiles[i].name);
							}
						}
				 }
				 formdata.append("taskDto", JSON.stringify(taskDto));
					this.$api.reqApi.reportSave(formdata).then(res => { 
						if(res.code == 200){
							uni.switchTab({url: '/pages/scheduling/taskManage/index'});
						}
					})
				 
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 40rpx;
	margin-top: 28rpx;
}
.uni-uploader__files{
	display: flex;
	flex-wrap: wrap;
	.uni-uploader__file{
		width: 168rpx;
		height: 168rpx;
		margin-right: 20rpx;
		margin-bottom:20rpx;
		position: relative;
		uni-image,uni-video{
			width: 100%;
			height: 100%;
		}
		&:nth-child(3n){
			margin-right: 0rpx;
		}
		.close{
			width: 48rpx;
			height: 48rpx;
			background: url(../../../assets/images/home/icon_del.png) no-repeat 0 0;
			background-size: 100%;
			display: inline-block;
			position: absolute;
			top: -12rpx;
			right: -12rpx;
			z-index: 9;
		}
	}
}
 .uploader__img,.uploader__video{
		border: 1px dotted #C6C8CC;
		width: 166rpx;
		height: 166rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		span{
			color: #A0A8B3;
			&::before{
				content: "";
				display: block;
				width: 60rpx;
				height: 60rpx;
				background: url(../../../assets/images/home/icon_video.png) no-repeat 0 0;
				background-size: 100%;
				margin: 0 auto 12rpx;
			}
		}
	}
	
	.uploader__img{
		margin-right: 20rpx;
		span{
			&::before{
				background: url(../../../assets/images/home/icon_picture.png) no-repeat 0 0;
				background-size: 100%;
			}
		}
	}
	.checkBtnList2 {
		width: 100%;
		height: 62rpx;
		margin-bottom: 2px;
		.checkBtn {
			width: 45%;
			height: 100%;
			float: left;
			border-radius: 8rpx;
			background-color: rgba(78, 123, 239, 0.078);
			text-align: center;
			margin-right: 32rpx;
			line-height: 62rpx;
			font-size: 28rpx;
		}
		.checkBtnActive {
			width: 45%;
			float: left;
			border-radius: 8rpx;
			background-color: rgba(78, 123, 239, 0.078);
			border-width: 1px;
			border-color: rgb(78, 123, 239);
			border-style: solid;
			text-align: center;
			color: rgb(78, 123, 239);
		}
	}
</style>
